<template>
    <div class="row">
        <el-button
                v-for="i in labels"
                @click="clicked(i)"
                :class="active===i? '': 'text'"
                size="small"
                class="label"
                :key="i"
        >
            {{i}}
        </el-button>
    </div>
</template>

<script>
    export default {
        name: "MiddleLabel",
        props: {
            labels: Array,
        },
        data() {
            return {
                active: this.labels[0],
            }
        },
        methods: {
            clicked(i) {
                this.active = i
                this.$emit('input', this.labels.indexOf(i))
            }
        }
    }
</script>

<style scoped>
    .text {
        background-color: transparent;
        outline: transparent;
        border: transparent;
    }
    .row{
        margin-top: 5px;
        margin-bottom: 5px;
    }

</style>
